import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  Dimensions,
  ScrollView,
  StyleSheet,
  TouchableHighlight,
} from 'react-native';
import {ActivityIndicator} from '@ant-design/react-native';
import {cwGet} from '../utils/http';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import deviceImg from '../assets/8.png';
import banner from '../assets/sb.png';
import moment from 'moment';

export default class DrawingPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
      deviceList: [],
      currentDeviceForList: '',
      allTags: [],
      title: '',
      currentName: true, //为true 就是6车间 否则为 7车间
      animating: false,
    };
  }

  componentWillUnmount() {
    clearInterval(this.time);
    this.time = null;
  }
  componentDidMount() {
    this.setState(
      {
        currentName: global.nowDevice.name[0] == 6 ? true : false,
        currentDeviceForList: global.nowDevice.id,
        title: global.nowDevice.name,
      },
      () => {
        this.getAllTagByPhoto();
      },
    );
  }

  getAllTagByPhoto() {
    clearInterval(this.time);
    this.time = null;
    this.setState({
      animating: true,
    });
    cwGet(
      'History/GetCraftTags?deviceID=' + this.state.currentDeviceForList,
    ).then(res => {
      if (res.length) {
        const tagString = res.map(item => item.tag).join('|');
        console.log(tagString);
        this.time = setInterval(() => {
          cwGet('RealTime/GetRealTimeDataByMoreSteps?tags=' + tagString)
            .then(tags => {
              console.warn('zhy9999999','http://121.36.28.99:8018/api/RealTime/GetRealTimeDataByMoreSteps?tags='+ tagString,tags);
              this.setState({
                animating: false,
                allTags: tags,
              });
            })
            .catch(err => {
              this.setState({
                animating: false,
              });
              clearInterval(this.time);
              this.time = null;
            });
        }, 2000);
      }
    });
  }

  render() {
    const deviceWidth = Dimensions.get('window').width;
    const returnValues = (tag, i) => {
      const {allTags} = this.state;
      let current = allTags.filter(item => item.signName === tag)[0];
      return current ? current.value?current.value + ' ' + i : '0 '+i: '';
    };
    const {currentName} = this.state;
    const labelsLeft = [//tag-->signName
      {label: '冷风流量', tag: 'HS_FT092002_i', i: 'Nm³/min'},
      {label: '冷风压力', tag: 'HS_PT092002_i', i: 'kPa'},
      {label: '热风压力', tag: 'HS_PT092001_i', i: 'kPa'},
      {
        label: '热风温度',
        tag: currentName ? 'HS_TE092001A_i' : 'HS_TE092001B_i',
        i: '℃',
      },
      {label: '透气性', tag: 'LT.CALC.VENT_QUAL', i: 'Nm³/kpa'},// ''===>'Nm³/kpa
      {label: '高炉压差', tag: 'LT.CALC.DIFF_PRESS', i: 'kPa'},
      {label: '顶压', tag: 'BT_PT082001_i', i: 'kPa'},
      {label: '平均顶温', tag: 'LT.CALC.BT.TE.AVG', i: '℃'},
      {
        label: '瞬时喷煤',
        tag: currentName ? '6_pmsl' : '7_pmsl1',
        i: 't/h',
      },
      {label: 'CO2', tag: 'BT_CO2_i', i: '%'},
      {label: 'H2', tag: 'BT_H2_i', i: '%'},

    ];
    const labelsRight = [//tag-->signName
      {
        label: '鼓风动能',
        tag: currentName ? 'LT.CALC.BLAST.POWER' : 'LT.CALC.BLAST.POWER2',
        i: 'KW',//Kj.m/s ==>KW
      },
      {
        label: '理论温度',
        tag: currentName ? 'LT.CALC.Theoretical.TE' : 'LT.CALC.Theoretical.TE2',
        i: '℃',
      },
      {label: '风口面积', tag: 'fengkoumianji', i: '㎡'},
      {
        label: '标准风速',
        tag: currentName ? 'LT.CALC.WIND.SPEED' : 'LT.CALC.WIND.SPEED2',
        i: 'm/s',
      },
      {
        label: '实际风速',
        tag: currentName
          ? 'LT.CALC.FACT.WIND.SPEED'
          : 'LT.CALC.FACT.WIND.SPEED2',
        i: 'm/s',
      },
      {label: '富氧率', tag: 'LT.CALC.OXYGEN', i: '%'},
      {label: '富氧量', tag: 'HS_FT092601_I', i: 'Nm³/h'},
 /*     {
        label: '炉腹煤气指数',
        tag: currentName ? 'LT.CALC.BOSH.GAS.INDEX' : 'LT.CALC.BOSH.GAS.INDEX2',
        i: '',
      },
      {
        label: '炉腹煤气量',
        tag: currentName ? 'LT.CALC.GAS.PROD' : 'LT.CALC.GAS.PROD2',
        i: 'Nm³/m',
      },*/
        {
            label: '矿批',//tag-->signName
            tag: currentName ? 'Ore_WTSetSum' : 'Ore_WTSetSum',//LT.LD.Ore_WTSetSum LT.LD2.Ore_WTSetSum
            i: 'Kg',
        },
        {label: '焦批', tag: currentName ?'Cok_WTSet_Total':'Cok_WTSet_Total', i: 'Kg'},//05-05  "焦批", "tag": "LT.LD.Cok_WTSet_Total
        {
            label: '负荷',
            tag: currentName ? 'CALC.LOAD' : 'CALC.LOAD',//LT.CALC.LOAD  LT2.CALC.LOAD
            i: '',
        },
      {label: '煤气利用率', tag: 'LT.CALC.CO', i: '%'},
     // {label: 'CH4', tag: 'BT_CH4_i', i: '%'},
      {label: 'CO', tag: 'BT_CO_i', i: '%'},

    ];

    const {currentDeviceForList, title} = this.state;
    return (//工艺图==>主要参数画面
      <View>
        <ScrollView>
          <View
            style={{
              marginLeft: 20,
              flexDirection: 'row',
              marginTop: 5,
              alignItems: 'center',
            }}>
            <FontAwesome
              style={{backgroundColor: 'transparent', marginRight: 20}}
              name="bars"
              color="grey"
              size={16}
            />
            <Text style={{fontSize: 16}}>主要参数画面</Text>
            {title.length > 0 ? (
              <FontAwesome
                style={{
                  backgroundColor: 'transparent',
                  marginRight: 10,
                  marginLeft: 10,
                }}
                name="chevron-left"
                color="grey"
                size={16}
              />
            ) : (
              <View />
            )}
            <Text>{title}</Text>
          </View>
          <Text
            style={{
              fontSize: 12,
              marginLeft: 20,
              paddingTop: 5,
              paddingBottom: 5,
            }}>
            {this.state.allTags[0]
              ? moment().format('YYYY-MM-DD HH:mm:ss')
              : ''}
          </Text>
          <ActivityIndicator
            animating={this.state.animating}
            toast
            size="large"
            text="加载中..."
          />
          <View style={{flexDirection: 'row'}}>
            <View style={{width: deviceWidth / 5, flex: 1, marginLeft: 20}}>
              {labelsRight.map(item => {
                return (
                  <View
                    style={{
                      flexDirection: 'row',
                      flexWrap: 'wrap',
                      paddingBottom: 2,
                    }}>
                    <Text style={{fontSize: 14}}>{item.label}：</Text>
                    <Text style={{fontSize: 12, color: 'grey'}}>
                      {returnValues(item.tag, item.i)}
                    </Text>
                  </View>
                );
              })}
            </View>
            <View style={{width: deviceWidth / 5, flex: 1}}>
              {labelsLeft.map(item => {
                return (
                  <View
                    style={{
                      flexDirection: 'row',
                      flexWrap: 'wrap',
                      paddingBottom: 2,
                    }}>
                    <Text style={{fontSize: 14}}>{item.label}：</Text>
                    <Text style={{fontSize: 12, color: 'grey'}}>
                      {returnValues(item.tag, item.i)}
                    </Text>
                  </View>
                );
              })}
            </View>
          </View>
          <View style={{flexDirection: 'row'}}>
            <View style={{flex: 1, position: 'relative'}}>
              <Text
                style={{
                  fontSize: 12,
                  position: 'absolute',
                  bottom: 70,
                  right: 30,
                }}>
                左尺：{returnValues('BT_Rod1_Position', '')}m
              </Text>
            </View>
            <View
              style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Image
                style={{
                  width: deviceWidth / 2.5,
                  height: (deviceWidth / 2.5) * 1.7,
                }}
                source={deviceImg}
              />
            </View>
            <View style={{flex: 1, position: 'relative'}}>
              <Text
                style={{
                  fontSize: 12,
                  position: 'absolute',
                  bottom: 70,
                  left: 30,
                }}>
                右尺：{returnValues('BT_Rod2_Position', '')}m
              </Text>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const DrawStyles = StyleSheet.create({
  curretnTab: {
    backgroundColor: '#638AD0',
  },
});
